<template>
  <div v-loading="loading">
    <el-row type="flex" justify="end">
      <el-col :span="2">
        <el-button type="primary" @click="handleReturn">返回</el-button>
      </el-col>
    </el-row>
    <div class="detailCont">
      <div class="header" v-if="detail.insDate || detail.loginName || detail.result">
        <span class="blueBlock"></span>
        <span>基本信息</span>
      </div>
      <div class="body">
        <div v-if="detail.insDate" class="bodyCont">
          <span>记录时间 :</span>
          <span>{{detail.insDate}}</span>
        </div>
        <!-- <div v-if="detail" class="bodyCont">
          <span>操作名称 :</span>
          <span></span>
        </div> -->
        <div v-if="detail.loginName" class="bodyCont">
          <span>登录账号 :</span>
          <span>{{detail.loginName}}</span>
        </div>
        <!-- <div class="bodyCont">
          <span>租户名称 :</span>
          <span></span>
        </div> -->
        <div v-if="detail.result" class="bodyCont">
          <span>登录结果 :</span>
          <span>{{detail.result}}</span>
        </div>
      </div>
      <div class="header" v-if="detail.requestMethod || detail.requestUrl || detail.params">
        <span class="blueBlock"></span>
        <span>请求信息</span>
      </div>
      <div class="body">
        <div v-if="detail.requestMethod" class="bodyCont">
          <span>请求的方法 :</span>
          <span>{{detail.requestMethod}}</span>
        </div>
        <div v-if="detail.requestUrl" class="bodyCont">
          <span>请求的URL :</span>
          <span>{{detail.requestUrl}}</span>
        </div>
        <div v-if="detail.params" class="bodyCont">
          <span>请求的参数 :</span>
          <span>{{detail.params}}</span>
        </div>
        <!-- <div class="bodyCont">
          <span>关联注册URL :</span>
          <span></span>
        </div> -->
      </div>
      <div class="header" v-if="detail.isResource == true || detail.isResource == false || detail.resourceName || detail.resourceType">
        <span class="blueBlock"></span>
        <span>资源信息</span>
      </div>
      <div class="body">
        <div v-if="detail.isResource == true || detail.isResource == false" class="bodyCont">
          <span>是否资源 :</span>
          <span>{{detail.isResource == true ? "是" : "否"}}</span>
        </div>
        <div v-if="detail.resourceName" class="bodyCont">
          <span>资源名称 :</span>
          <span>{{detail.resourceName}}</span>
        </div>
        <div v-if="detail.resourceType" class="bodyCont">
          <span>资源类型 :</span>
          <span>{{detail.resourceType}}</span>
        </div>
      </div>
      <div class="header" v-if="detail.remoteIp || detail.serverIp || detail.serverName">
        <span class="blueBlock"></span>
        <span>客户端&服务器信息</span>
      </div>
      <div class="body">
        <div v-if="detail.remoteIp" class="bodyCont">
          <span>客户端IP地址 :</span>
          <span>{{detail.remoteIp}}</span>
        </div>
        <!-- <div class="bodyCont">
          <span>客户端地域地址 :</span>
          <span></span>
        </div> -->
        <div v-if="detail.serverIp" class="bodyCont">
          <span>服务器IP地址 :</span>
          <span>{{detail.serverIp}}</span>
        </div>
        <div v-if="detail.serverName" class="bodyCont">
          <span>服务器名称 :</span>
          <span>{{detail.serverName}}</span>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
import { auditApi } from "@/request";

export default {
  name: "DL",
  data() {
    return {
      detail: {},
      loading: false, //是否loading转圈
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      const id = parseInt(this.$route.params.id);
      if (id >= 0) {
        this.loading = true;
        auditApi.getAuditDetail(id).then(res => {
          this.detail = res.data;
          this.loading = false;
        });
      } else {
        this.$message({
          message: "id不存在，请确认id！",
          type: "warning"
        });
      }
    },
    // 返回列表
    handleReturn() {
      if (window.history.length > 1) {
        this.$router.back();
      } else {
        this.$router.push("/auditLog");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/* 详情页 */
.detailCont {
  width: 100%;
  height: auto;
  padding: 20px;
  border: 1px solid #dcdfe6;
  margin-top: 20px;
  margin-bottom: 20px;
  .header {
    width: 100%;
    padding: 10px 0 5px 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;
    .blueBlock {
      width: 8px;
      height: 8px;
      background: #409eff;
      margin-right: 8px;
    }
  }
  .body {
    width: 100%;
    margin: 10px 0;
    .bodyCont {
      width: 100%;
      margin: 10px 0;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      span:nth-of-type(1) {
        margin-right: 8px;
        padding-left: 20px;
      }
    }
  }
}
</style>